<template>
	<view class="tip-box" :style="{'display':isShow?'block':'none'}">
		<view class="tip-wrapper">
			<view class="tip-header">
				<text>提示</text>
				<uni-icons type="closeempty" size="18" @click="isShow=false"></uni-icons>
			</view>
			<view class="tip-content">
				{{$props.tipContent}}
			</view>
			<view class="tip-action">
				<view class="button" @click="hideTip('yes')">确定</view>
			</view>
		</view>
	</view>

</template>

<script lang="ts">
	import {
		defineComponent,
		ref
	} from 'vue'
	export default defineComponent({
		props: {
			tipContent: {
				type: String,
				default: () => '--'
			}
		},
		emits: ['clickType'],
		setup(props, {
			emit
		}) {
			const isShow = ref(false)
			const hideTip = (val: string) => {
				emit('clickType', val)
				closeTip()
			}
			const openTip = () => {
				isShow.value = true
			}
			const closeTip = () => {
				isShow.value = false
			}
			return {
				hideTip,
				openTip,
				isShow
			}
		}
	})
</script>

<style lang="scss" scoped>
	.tip-box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 88;
	}

	.tip-wrapper {
		border-radius: 15px;
		width: 78%;
		background-color: #fff;
		z-index: 99;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		overflow: hidden;
		padding-bottom: 16px;

		.tip-header {
			background-color: #f4f4f4;
			padding: 10px 15px;
			display: flex;
			justify-content: space-between;
		}
		.tip-content{
			height: 60px;
			text-align: center;
			line-height: 60px;
		}
		.tip-action{
			height: 50px;
			position: relative;
			.button{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 50%;
				line-height: 30px;
				border-radius: 15px;
				background-color: #58bc9b;
				color: #fff;
				text-align: center;
			}
		}
	}
</style>
